<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
        <META HTTP-EQUIV="Expires" CONTENT="-1">
        <title>jQuery.sheet - The Web Based Spreadsheet</title>
        <!--Required-->
        <link rel="stylesheet" type="text/css" href="jquery.sheet.css" />
        <link rel="stylesheet" type="text/css" href="jquery-ui/theme/jquery-ui.css" />
        <script type="text/javascript" src="jquery-1.5.2.js">
        </script>
        <script type="text/javascript" src="jquery.sheet.js">
        </script>
        <script type="text/javascript" src="parser.js">
        </script>
        <!--/Required-->
<head>

    <script>
       $(document).ready(function() {
            $('#jQuerySheet').sheet({
                     title: 'Inline Spreadsheet demo',
                     buildSheet: '10x10',
                     editable: true,
                     calcOff: true,

                     fnSave: function() { parent.getSheet().saveSheet(); alert('Save'); },
                     fnSync: function() {
                     	var blah = $('[id$=jQuerySheet]').getSheet();
                     	var sht = $('[id$=jQuerySheet]').getSheet().obj.cellActive();
                        var cellref = $('[id$=jQuerySheet]').getSheet().getTdLocation(sht);
                        var sheetTab =  $('[id$=jQuerySheet]').getSheet().sheetTab(true);
                        var cellValue = $('[id$=jQuerySheet]').getCellValue(cellref.row,cellref.col,blah.i);
                        alert('Sheet: ' + sheetTab + '\nRow: ' + cellref.row + '\nCol: ' + cellref.col + '\nCell Text: ' + cellValue);
                        $('[id$=jQuerySheet]').getSheet().themeRoller.cell.setSynced(sht);
                        
                        
                   	}
              });
         
         
             $('#btn').click(function() {
                  var cellTD = $('[id$=jQuerySheet]').getSheet().obj.cellHighlighted();
                  var c = [];
                  var r = [];
				  jQuery.each(cellTD, function(i,cell) {
				      obCell = $(cell);
				      cellRef = $('[id$=jQuerySheet]').getSheet().getTdLocation(obCell);
				      c.push(cellRef.col);
				      r.push(cellRef.row);
				   });
				  alert('R' + Array.min(r) + 'C' + Array.min(c) + ' to R' + Array.max(r) + 'C' + Array.max(c));
				  
             });
              
              // Function to get the Max value in Array
        	Array.max = function( array ){
            	return Math.max.apply( Math, array );
	        };
	    
	        // Function to get the Min value in Array
	        Array.min = function( array ){
	           return Math.min.apply( Math, array );
	        };
         
         
         });
    
        
        //This function builds the inline menu to make it easy to interact with each sheet instance
            function inlineMenu(I){
                I = (I ? I.length : 0);
                
                //we want to be able to edit the html for the menu to make them multi-instance
                var html = $('[id$=inlineMenu]').html().replace(/sheetInstance/g, "$.sheet.instance[" + I + "]");
                
                var menu = $(html);
                
                
                
                return menu;
            }

        
        
    </script>
</head>    
<body>

<table width="95%" id="theTable">
    <tr>
        <td width="100px">
        
            <!--<apex:commandButton value="Load Data" action="{!loaddata}" title="Load Data"/>-->
            <button id="btn">Show table</button>
        
        </td>
        <td>
            <div id="jQuerySheet"></div>
        </td>
    </tr>
</table>




</body>
</html>

